<template>
  <div style="padding-left: 30px">

    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-form-item required label="选择类型" prop="workOrderType">
        <el-radio-group v-model="form.workOrderType">
          <el-radio :label="1">库存占用</el-radio>
          <el-radio :label="2">库存释放</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item required label="选择车辆" prop="carLicenceNum">
        <el-input disabled v-model="form.carLicenceNum"></el-input>
      </el-form-item>

      <el-form-item required label="选择时间" prop="daterange">
        <el-date-picker v-model="form.daterange" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item required label="选择平台" prop="sourceCodes">
        <el-checkbox-group v-model="form.sourceCodes">
          <el-checkbox v-for="(item, index) in originList" :key="index" :label="item.dictValue" :name="item.dictValue">{{
            item.dictLabel }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

    </el-form>

    <div class="bottom-layout">
      <el-button size="mini" @click="cancelQuery">取消</el-button>
      <el-button type="primary" size="mini" @click="commit">确定</el-button>
    </div>

  </div>
</template>

<script>
import * as otaApi from '@/api/ota/ctrip';
export default {
  data() {
    return {
      form: {
        workOrderType: 1,
        sourceCode: '',
        sourceCodes: [],
        carLicenceNum: '',
        carModelId: '',
        carUsageStartTime: '',
        carUsageEndTime: '',
        orderEncryptId: null,
        daterange: [],
      },
      originList: [],
      // 表单校验
      rules: {
        carLicenceNum: [
          {
            required: true,
            message: '车牌号不能为空',
            trigger: 'blur',
          },
        ],
        daterange: [
          {
            required: true,
            message: '请选择占用时间',
            trigger: 'blur',
          },
        ],
        sourceCodes: [
          {
            required: true,
            message: '请至少选择一个占用平台',
            trigger: 'change',
          },
        ]
      },
    };
  },
  props: {
    carData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  mounted() {
    this.form.carLicenceNum = this.carData.carNo;
    this.form.carModelId = this.carData.modelId;
    this.getOriginList()
  },
  methods: {
    getOriginList() {
      this.getDicts('ota_order_resource').then(res => {
        this.originList = res.data
      })
    },
    cancelQuery() {
      this.$emit("cancel", true);
    },
    commit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.form.carUsageStartTime = this.form.daterange[0];
          this.form.carUsageEndTime = this.form.daterange[1];
          this.form.sourceCode = this.form.sourceCodes.join(',');
          otaApi.addOTAWorkorder(this.form).then(res => {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            this.$emit('success');
          })
        }
      })
    }
  },
};
</script>

<style scoped>
.bottom-layout {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 40px 0 0;
}

/deep/ .el-input {
  width: 350px !important;
}
</style>
